<template>

  <view class="page-bg-white">
    <view class="login-box">
      <image :src="hasLogin ? userInfo.avatarUrl : defaultAppInfo.appLogo" class="login-image" />
      <view class="text-black text-lg text-bold my-1">{{defaultAppInfo.appName}}</view>
      <view class="text-secondary text-df mt5">{{hasUserInfo ? userInfo.nickName : '尚未登录'}}</view>
      <view class="solid-top w-100 mt-5 pt30">
        <view class="text-black text-df text-left">申请获取以下权限，请确认是本人操作</view>
        <view class="text-secondary text-sm tl">· 获取您的公开信息（昵称、头像等）</view>
      </view>

      <view class="btn-box">
        <button v-if="step === 1" @click="getUserInfo" class="btn-item text-bold">微信授权登录</button>
        <button v-if="step === 2" open-type="getPhoneNumber" @getphonenumber="toRegister" lang="zh_CN"
          class="btn-item text-bold">绑定手机号码</button>
      </view>
    </view>
  </view>

</template>

<script>
  export default {
    data() {
      return {
        step: 1,
        params: {},
        hasUserInfo: false,
        userInfo: {},
      }
    },
    computed: {
      defaultAppInfo() {
        return this.$store.getters.defaultAppInfo
      },
    },
    watch: {},
    onLoad() {
      this.$store.dispatch("wxLogin").then(
        res => {
          //登录成功返回上一页
          uni.navigateBack();
        },
        err => {
          console.log(err)
          if (err.code === 4080) {
            this.params.sessionKey = err.data.sessionKey
            this.params.openid = err.data.openid
            if (err.data.unionid) {
              this.params.unionid = err.data.unionid
            }
          } else {
            this.$xf.showModal({
              title: '提示',
              content: '小程序遇到错误，请重启',
            })
          }
        }
      );
    },
    methods: {
      onLogin() {
        //已登录返回上一页
        uni.navigateBack();
      },
      getUserInfo(e) {
        uni.getUserProfile({
          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
          success: (res) => {
            // 用户信息
            this.userInfo = JSON.parse(res.rawData)
            this.params = Object.assign(this.params, this.userInfo)
            this.step = 2;
            this.hasUserInfo = true
          },
          fail: (res) => {
            console.log(res)
          }
        })
      },
      async toRegister(res) {
        //console.log("获取到的手机号码信息:", JSON.stringify(res));
        let type = null;
        if (res.currentTarget && res.currentTarget.dataset) {
          type = res.currentTarget.dataset.type;
        }
        console.log("绑定手机号类型：", type);
        if (res.detail.encryptedData) {
          this.params = Object.assign(this.params, res.detail)
          let ret = await this.$store.dispatch('toRegisterByPhone', this.params)
          //console.log('注册返回用户信息:', ret)
        }
      },
    }
  }

</script>

<style scoped lang="scss">
  .login-box {
    background-color: $color-white;
    padding: 80rpx 40rpx 0rpx 40rpx;
    border-radius: 20rpx;
    font-size: 36rpx;
    color: #9A9A9A;
    line-height: 45rpx;
    display: flex;
    justify-content: center !important;
    flex-direction: column;
    align-items: center;

    .login-image {
      width: 160rpx;
      height: 160rpx;
      margin-bottom: 20rpx;
    }
  }

  .btn-box {
    padding: 90rpx 30rpx 0 30rpx;

    .btn-item {
      background-color: $color-success;
      color: $color-white;
      font-size: 28rpx;
      width: 500rpx;
      position: relative;
      border: 0rpx;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      padding: 0 30rpx;
      height: 84rpx;
      line-height: 1;
      text-align: center;
      text-decoration: none;
      overflow: visible;
      margin-left: initial;
      transform: translate(0rpx, 0rpx);
      margin-right: initial;
    }
  }

</style>
